<template>
  <div>
    <!-- 顶栏 -->
    <div class="top">
      <el-input
        placeholder="请输入名称"
        prefix-icon="el-icon-search"
        v-model="input"
        @input="blur()"
      >
      </el-input>
      <el-button type="primary" icon="el-icon-search" @click="change()"
        >搜索</el-button
      >
    </div>

    <!-- 主表单框 -->
    <div class="down">
      <el-table :data="tableData" height="570" border style="width: 100%">
        <el-table-column
          prop="name"
          label="名称"
          width="160"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="class"
          label="种类"
          width="160"
          align="center"
        ></el-table-column>
        <el-table-column prop="price" label="价格" width="160" align="center">
        </el-table-column>
        <el-table-column prop="number" label="数量" width="175" align="center">
        </el-table-column>
        <el-table-column prop="hj" label="储存环境" width="160" align="center">
        </el-table-column>
        <el-table-column
          prop="person"
          label="入库人"
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="weizhi"
          label="储存位置"
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="xinxi"
          label="具体信息"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              plain
              @click="handleEdit(scope.$index, scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 查看 -->
    <el-dialog title="物品信息" :visible.sync="dialogFormVisible">
      <el-form :model="AddStore" ref="ManageTable">
        <el-form-item label="编号" label-width="100px">
          <el-input v-model="AddStore._id" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="入库人" label-width="100px">
          <el-input v-model="AddStore.person" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="名称" label-width="100px">
          <el-input v-model="AddStore.name" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="类别" label-width="100px">
          <el-input v-model="AddStore.class" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="价格" label-width="100px">
          <el-input v-model="AddStore.price" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="库存数量" label-width="100px">
          <el-input v-model="AddStore.number" readonly="readonly"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 查看dialog显现
      dialogFormVisible: false,
      // 主表单数据
      tableData: [],
      // 查看dialog数据
      AddStore: {},
      // 搜索lan
      input: '',
      location: ''
    }
  },
  created () {
    this.myStore()
  },
  methods: {
    // 请求库存
    myStore () {
      const that = this
      this.$http({
        method: 'GET',
        url: '/lk/lk/storeAll'
      }).then(function (response) {
        that.tableData = response.data.data
        for (let i = 0; i < that.tableData.length; i++) {
          if (Number(that.tableData[i].number) <= 0) {
            that.tableData.splice(i, 1)
          }
          else if (that.tableData[i].hj.search('0') != -1) {
            that.tableData[i].weizhi = '低温仓库'
          } else if (that.tableData[i].hj.search('0') == -1) {
            that.tableData[i].weizhi = '常温仓库'
          }
        }
      })
    },
    // input输入框为空时：
    blur () {
      if (this.input == '') {
        this.change()
      }
    },
    // 搜索函数
    change () {
      const that = this
      this.$http({
        method: "POST",
        url: '/lk/lk/storeGuanliSearch',
        data: {
          name: this.input
        }
      }).then(function (response) {
        that.tableData = response.data.data
      })
    },
    // 查看
    handleEdit (index, row) {
      console.log(row);
      this.dialogFormVisible = true
      // 在表单中显示要修改的数据
      this.AddStore = row
    },




    // 添加库存
    // StoreAdd (form) {
    //   console.log(form);
    //   const that = this
    //   this.$http({
    //     method: 'POST',
    //     url: '/lk/lk/storeAdd',
    //     data: {
    //       name: form.name,
    //       class: form.class,
    //       price: form.price,
    //       number: form.number
    //     }
    //   }).then(function (response) {
    //     that.tableData = response.data.data
    //   })
    //   that.dialogFormVisible = false
    //   location.reload()
    // }
  }
}
</script>

<style lang="less" scoped>
.top {
  top: 80px;
  position: absolute;
  .el-input {
    width: 300px;
    // margin-bottom: 10px;
  }
  .el-button {
    height: 39px;
  }
}
.down {
  position: relative;
  top: 60px;
}
#xuanze {
  display: flex;
}
#add {
  float: right;
}
</style>